<template>
	<div>
	  <el-row>
	    <el-col :span="24">
	      <div id="line1" class="chart"></div>
	    </el-col>
	  </el-row>
	</div>
</template>

<script>
	import Util from '@/assets/js/util';
	import 'echarts-liquidfill';
	export default {
	  name: "TrafficVolume",
	  data: function(){
	    return {
			title:'今日和昨日访问量',
			data:['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
			series:[],
		}
	  },
	  computed: {
	    chartLine1() {
	      return this.$echarts.init(Util.getDom('line1'));
	    },
      },
	  methods:{
		createLine(rows){
			for(let index in rows){
				let row = rows[index];
				let line = {
				  name: row.name,
				  type: 'line',
				  smooth: true,
				  showSymbol: false,
				  symbol: 'circle',
				  symbolSize: 4,
				  data: row.data,
				  areaStyle: {
				    normal: {
				      color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				        offset: 0,
				        color: 'rgba(199, 237, 250,0.5)'
				      }, {
				        offset: 1,
				        color: 'rgba(199, 237, 250,0.2)'
				      }], false)
				    }
				  },
				  itemStyle: {
				    normal: {
				      color: 'rgba(154, 116, 179, 0.7)'
				    }
				  },
				  lineStyle: {
				    normal: {
				      width: 2
				    }
				  }
				};
				this.series.push(line);
			}
		},
	  	drawLine1() {
	  	  let title = this.title;
	  	  let option = {
	  	    title: Object.assign({}, Util.defaultEchartsOpt.title, {text: title}),
	  	    grid: {
	  	      top: 60,
	  	      left: 60,
	  	      right: 80,
	  	      bottom: 20,
	  	      containLabel: true
	  	    },
	  	    tooltip: {
	  	      trigger: 'axis',
	  	      axisPointer: {
	  	        lineStyle: {
	  	          color: '#ddd'
	  	        }
	  	      },
	  	      backgroundColor: 'rgba(255,255,255,1)',
	  	      padding: [5, 10],
	  	      textStyle: {
	  	        color: '#999',
	  	      },
	  	      extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
	  	    },
	  	    legend: {
	  	      top: 15,
	  	      right: 20,
	  	      orient: 'vertical',
	  	      textStyle: {
	  	        color: "#666"
	  	      }
	  	    },
	  	    xAxis: {
	  	      type: 'category',
	  	      data: this.data,
	  	      boundaryGap: false,
	  	      splitLine: {
	  	        show: false,
	  	        interval: 'auto',
	  	        lineStyle: {
	  	          color: ['#D4DFF5']
	  	        }
	  	      },
	  	      axisTick: {
	  	        show: false
	  	      },
	  	      axisLine: {
	  	        lineStyle: {
	  	          color: '#999'
	  	        }
	  	      },
	  	      axisLabel: {
	  	        margin: 10,
	  	        textStyle: {
	  	          fontSize: 14
	  	        }
	  	      }
	  	    },
	  	    yAxis: {
	  	      type: 'value',
	  	      splitLine: {
	  	        lineStyle: {
	  	          color: ['#D4DFF5']
	  	        }
	  	      },
	  	      axisTick: {
	  	        show: false
	  	      },
	  	      axisLine: {
	  	        lineStyle: {
	  	          color: '#999'
	  	        }
	  	      },
	  	      axisLabel: {
	  	        margin: 10,
	  	        textStyle: {
	  	          fontSize: 14
	  	        }
	  	      }
	  	    },
	  	    series: this.series
	  	  };
	  	  this.chartLine1.setOption(option);
	  	  return this;
	  	},
		resizeChart() {
		  window.addEventListener("resize", () => {
		    this.chartLine1.resize();
		  });
		},
		initData(){
			let line = [{name:'今日',data:['12000', '1400', '1008', '1411', '1026', '1288', '1300', '800', '1100', '1000', '1118', '1322']},
			            {name:'昨日',data:['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822']}];
			this.createLine(line)
		},
	  },
	  mounted() {
		this.initData()
	    this.drawLine1();
	  },
	}
</script>

<style scoped lang="less">
  .el-row {
    margin-top: 20px;
  }
  .chart {
    width: 100%;
    height: 350px;
    .border-radius(8px);
    background-color: @boxBgColor;
    box-shadow: 0 0 5px transparent;
    &:hover {
      box-shadow: 0 0 5px @mainColor;
    }
  }
</style>